<template>
	<div>
		<div class='archive' v-if="JSON.stringify(archiveArr) !== '{}'">
			<h2 class="h2-bb">{{title}}</h2>
			<div class="entry-content" v-for="(item, key, index) in archiveArr">
				<h3 class="title">{{key}}（{{item.length}}）</h3>
				<ul>
					<li v-for="content in item">
						<span @click="toDetail(content)">{{content.title}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="nodata" v-if="JSON.stringify(archiveArr) === '{}'">
			<no-data></no-data>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { parseTime } from 'common/utils/formatTime'
import noData from 'base/NoData'
export default {
  data() {
    return {
      title: '归档',
      archiveArr: {}
    }
  },
  computed: {
    ...mapGetters([
      'articleList',
      'articleTotal'
    ])
  },
  components: {
    noData
  },
  created() {
    this.getArticleList()
  },
  methods: {
    toDetail(article) {
      this.$store.dispatch('GetThisArticle', article._id)
      this.$router.push(`/article/${article._id}`)
    },
    getArticleList() {
      if (this.articleTotal === 0 || this.articleTotal > this.articleList.length) {
        this.$store.dispatch('GetArticleList', { all: 'all' }).then((res) => {
          this.createArchiveList(res.list)
        })
      } else {
        this.createArchiveList(this.articleList)
      }
    },
    createArchiveList(list) {
      const archiveArr = {}
      list.forEach((item, index) => {
        const toDate = parseTime(item.createAt, '{y}年{m}月')
        if (!archiveArr[toDate]) {
          archiveArr[toDate] = []
        }
        archiveArr[toDate].push(item)
      })
      this.archiveArr = archiveArr
    }
  }
}
</script>
<style lang="scss" scoped>
  .archive {
    padding: 5px 10px 10px;
    margin-bottom: 20px;
    line-height: 38px;
    border-radius: 5px;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    .h2-bb {
      border-bottom: 1px #666 dashed;
      padding-bottom: 10px;
      user-select: none;
    }
    h3 {
      margin-bottom: 10px;
    }
    ul {
      list-style: disc;
      li {
        height: 28px;
        line-height: 28px;
        position: relative;
        text-indent: 1em;
        span{
          color: #2479cc;
          cursor: pointer;
          padding: 0 10px;
          &:hover {
            text-decoration: underline;
          }
        }
        &:before {
          content: '';
          position: absolute;
          top: 14px;
          width: 5px;
          height: 5px;
          left: 5px;
          border-radius: 50%;
          background-color: #3c3c3c;
        }
      }
    }
    .title {
      color: #3c3c3c;
    }
  }
</style>
